<template>
	<view class="container">
		<view class="input-container"><input type="number" class="input" placeholder="请输入手机号" focus="true" v-model="telephone" /></view>
		<view class="input-container">
			<input type="number" class="input verifyCode" placeholder="请输入验证码" focus="true" v-model="verifyCode" />
			<button type="primary" class="verifyBtn" @tap="sendVerify">{{ verifyBtn }}</button>
		</view>
		<button type="primary" class="btn" @tap="bindPhone">绑定</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			telephone: '',
			verifyCode: '',
			checkCode: '',
			verifyBtn: '发送'
		};
	},
	onLoad() {
		// #ifdef H5
		this.$wechat.share({
			link: this.$handlerAppMessagePath()
		});
		// #endif
	},
	onShareAppMessage(e) {
		return {
			path: this.$handlerAppMessagePath()
		};
	},
	methods: {
		sendVerify() {
			if (!this.telephone) {
				uni.showModal({
					content: '请输入手机号码',
					showCancel: false
				});
			} else {
				this.$http
					.request({
						url: 'api/UcenterApi/SendCaptcha',
						data: {
							telephone: this.telephone
						}
					})
					.then(code => {
						this.checkCode = code;
						var Count = 60;
						this.verifyBtn = --Count + 'S';
						var setIntervalId = setInterval(() => {
							if (Count > 0) {
								this.verifyBtn = --Count + 'S';
							} else {
								clearInterval(setIntervalId);
								this.verifyBtn = '重新发送';
							}
						}, 1000);
					});
			}
		},
		bindPhone() {
			if (!this.telephone) {
				uni.showModal({
					content: '请输入手机号码',
					showCancel: false
				});
			} else if (!this.verifyCode) {
				uni.showModal({
					content: '请输入验证码',
					showCancel: false
				});
			} else if (this.checkCode != this.verifyCode) {
				uni.showModal({
					content: '输入的验证码不正确',
					showCancel: false
				});
			} else {
				this.$http
					.request({
						url: 'api/UcenterApi/UpdateTelephone',
						method: 'POST',
						data: {
							telephone: this.telephone
						}
					})
					.then(() => {
						uni.showToast({
							title: '绑定成功',
							success() {
								setTimeout(() => {
									uni.switchTab({
										url: 'user_center'
									});
								}, 1500);
							}
						});
					});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.input-container {
	border-bottom: 1px solid $uni-color-divider;
	line-height: 60rpx;
	width: 100%;
	display: flex;
	justify-content: center;
	.input {
		width: 90%;
		font-size: 30rpx;
		flex-grow: 0;
		flex-shrink: 0;
		padding: 20rpx 0;
	}
	.verifyCode {
		width: 70%;
		flex-grow: 0;
		flex-shrink: 0;
		padding: 20rpx 0;
	}
	.verifyBtn {
		width: 20%;
		flex-grow: 0;
		flex-shrink: 0;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 30rpx;
	}
}
.btn {
	width: 80%;
	margin: 0 auto;
	margin-top: 20rpx;
	background: $uni-color-main-dark;
}
</style>
